<template>
    <div>
        <div id="roseMap"></div>
        <div id="columnMap"></div>
        <div class="calendar_show">
            <el-calendar v-model="value">
            </el-calendar>
        </div>

    </div>
</template>

<script>
    export default {
        name: "EchartsList",
        data(){
            return{
                option1:null,
                option2:null,
                value: new Date()
            }

        },
        mounted() {
            this.init()
        },
        methods:{
            init(){
                var roseMap = document.getElementById("roseMap");
                var columnMap = document.getElementById("columnMap");
                var myChartrose = this.$echarts.init(roseMap,'shine');
                var myChartcolumn = this.$echarts.init(columnMap,'macarons');
                this.option1 = {
                    title: {
                        text: '订单量',
                        subtext: '销售比列',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        left: 'center',
                        top: 'bottom',
                        data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            magicType: {
                                show: true,
                                type: ['pie', 'funnel']
                            },
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: '半径模式',
                            type: 'pie',
                            radius: [20, 110],
                            center: ['25%', '50%'],
                            roseType: 'radius',
                            label: {
                                show: false
                            },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            },
                            data: [
                                {value: 10, name: 'rose1'},
                                {value: 5, name: 'rose2'},
                                {value: 15, name: 'rose3'},
                                {value: 25, name: 'rose4'},
                                {value: 20, name: 'rose5'},
                                {value: 35, name: 'rose6'},
                                {value: 30, name: 'rose7'},
                                {value: 40, name: 'rose8'}
                            ]
                        },
                        {
                            name: '面积模式',
                            type: 'pie',
                            radius: [30, 110],
                            center: ['75%', '50%'],
                            roseType: 'area',
                            data: [
                                {value: 10, name: 'rose1'},
                                {value: 5, name: 'rose2'},
                                {value: 15, name: 'rose3'},
                                {value: 25, name: 'rose4'},
                                {value: 20, name: 'rose5'},
                                {value: 35, name: 'rose6'},
                                {value: 30, name: 'rose7'},
                                {value: 40, name: 'rose8'}
                            ]
                        }
                    ]
                };
                this.option2 = {
                    legend: {},
                    tooltip: {},
                    dataset: {
                        source: [
                            ['product', '2012', '2013', '2014', '2015'],
                            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
                            ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
                            ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
                        ]
                    },
                    xAxis: [
                        {type: 'category', gridIndex: 0},
                        {type: 'category', gridIndex: 1}
                    ],
                    yAxis: [
                        {gridIndex: 0},
                        {gridIndex: 1}
                    ],
                    grid: [
                        {bottom: '55%'},
                        {top: '55%'}
                    ],
                    series: [
                        // These series are in the first grid.
                        {type: 'bar', seriesLayoutBy: 'row'},
                        {type: 'bar', seriesLayoutBy: 'row'},
                        {type: 'bar', seriesLayoutBy: 'row'},
                        // These series are in the second grid.
                        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
                        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
                    ]
                };
                if (this.option1 && typeof this.option1 === "object") {
                    myChartrose.setOption(this.option1, true);
                };
                if (this.option2 && typeof this.option2 === "object") {
                    myChartcolumn.setOption(this.option2, true);
                };
            }
        }
    }
</script>

<style scoped>
    #columnMap,#roseMap{
        width: 600px;
        height: 500px;
        /*border: 1px solid #bcffee;*/
    }
    #roseMap{
        float: left;
    }
    #columnMap{
        float: left;
        left: 50px;
    }
    .calendar_show{
        margin-top: 50px;
        float: left;
        height: 666px;
        width: 98%;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border: 1px solid #bcffee;
    }

</style>